class A extends React.Component{
	state={car:"奔驰"}
	changeCar=()=>{
	  this.setState({car:"奥拓"});
	}
	render(){
		return (
			<div>
				<div>A组件</div>
				<button onClick={this.changeCar}> 换车</button>
				<B car={this.state.car}/>
			</div>
		)
	}
}
class B extends React.Component{
	componentWillReceiveProps(props){
		console.log("B--componentWillReceiveProps")
	}
	render(){
		return (
			<div>我是B组件,接收到的车为{this.props.car}</div>
		)
	}
}
class Count extends React.Component{
	// 构造器
	constructor(props) {
		console.log("Count-constructor")
		super(props);
		this.state={count:0};
	}
	static getDerivedStateFromProps(){
		console.log("Count-getDerivedStateFromProps")
		return null;
	}
	// 在更新之前返回快照值
	getSnapshotBeforeUpdate(){
		console.log("getSnapshotBeforeUpdate")
		return 'hh'
	}
	// UNSAFE_componentWillMount(){
	// 	console.log("Count-getDerivedStateFromProps")
	// }
	componentDidMount(){
		console.log("Count-componentDidMount")
	}
	componentWillUnmount(){
		console.log("Count-componentWillUnmount")
	}

	shouldComponentUpdate(){
		console.log("Count-shouldComponentUpdate")
		return true;
	}
	// UNSAFE_componentWillUpdate(){
	// 	console.log("Count-componentWillUpdate")
	// }
	componentDidUpdate(preProps,preState,snapshotValue){
		console.log("Count-componentDidUpdate")
		console.log({preProps,preState,snapshotValue})
	}
	unmount=()=>{
		ReactDOM.unmountComponentAtNode(document.getElementById('test'))
	}
	add=()=>{
		let {count}=this.state
		this.setState({count:count+1});
	}
	forceUpdates=()=>{
		this.forceUpdate()
	}
	render(){
		console.log('Count-render')
		return (
			<div>
				<h2>当前求和为{this.state.count}</h2>
				<button onClick={this.add}>点我</button><br/>
				<button onClick={this.unmount}>卸载</button><br/>
				<button onClick={this.forceUpdates}>强制更新</button><br/>
			</div>
		)
	}
}
ReactDOM.render(<Count/>,document.getElementById("test"));
